<template>
  <div class="game-view">
    <Row>
      <Col span="24">
        <Form ref="formInline" inline>
          <FormItem>
            <Button type="primary" @click="onClickSaveAdBtn">添加广告</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <Table border :loading="loading" :columns="tbCol" :data="list" size="small">
          <template slot-scope="{ row, index }" slot="type">
            {{ row.type | adType }}
          </template>
          <template slot-scope="{ row, index }" slot="img">
            <img class="icon" :src="row.img"/>
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="onClickSaveAdBtn(row)">编辑</Button>
            <Button type="error" size="small" @click="onClickDeleteAdBtn(row)">删除</Button>
          </template>
        </Table>
      </Col>
    </Row>

    <div class="clear-10"></div>
    <Row>
      <Col span="24">
        <Page :total="total" :page-size="pageSize" show-total @on-change="pageChange"/>
      </Col>
    </Row>

    <Modal
      v-model="saveModel.show"
      :loading="saveModel.loading"
      :title="saveModel.title"
      @on-cancel="cancelModal"
      @on-ok="saveAd('adForm')">
      <Form ref="adForm" :model="adForm" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题" prop="title">
          <Input v-model="adForm.title" style="width: 400px" placeholder="请输入标题"></Input>
        </FormItem>
        <FormItem label="所属游戏" class="ivu-form-item-required">
          <Select v-model="adForm.gameId" style="width: 200px">
            <Option v-for="item in gameList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="位置" class="ivu-form-item-required">
          <Select v-model="adForm.type" style="width: 200px">
            <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="图片">
          <div class="img-upload">
            <div class="demo-upload-list" v-if="img.length > 0">
              <template>
                <img :src="img">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
                  <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                </div>
              </template>
            </div>
          </div>
          <Upload :action="Core.Const.NET.UPLOAD_FILE_URL"
                  :show-upload-list="false"
                  :on-success="handleUploadSuccess">
            <Button icon="ios-cloud-upload-outline">上传</Button>
          </Upload>
        </FormItem>
        <FormItem label="链接">
          <Input v-model="adForm.url" style="width: 400px" placeholder="请输入链接"></Input>
        </FormItem>
        <FormItem label="关联文章">
          <Input v-model="adForm.articleId" style="width: 400px" placeholder="请输入关联文章ID"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="delModel.show"
      title="提示"
      class-name="del-modal"
      @on-ok="delAd">
      <p>确定要删除该广告么?</p>
    </Modal>

    <Modal title="预览图片" v-model="previewModel.visible" footer-hide>
      <img :src="previewModel.img" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
import Editor from '_c/editor'
import Core from 'core/core'

export default {
  components: {
    Editor
  },
  data() {
    return {
      Core: Core,
      loading: true,
      tbCol: [
        {title: 'ID', key: 'id', width: '100px'},
        {title: '位置', slot: 'type'},
        {title: '标题', key: 'title'},
        {title: '图片', slot: 'img', width: 330},
        {title: '链接', key: 'url'},
        {title: '操作', slot: 'action', width: 150, align: 'center'}
      ],
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,

      img: [],
      adForm: {
        id: 0,
        title: '',
        url: '',
        gameId: '',
        type: '',
        articleId: ''
      },
      ruleValidate: {
        title: [
          {required: true, message: '标题不能为空', trigger: 'blur'}
        ]
      },
      typeList: [{
        id: 1,
        name: '主页轮播图'
      }, {
        id: 2,
        name: '主页滚动广告'
      }],
      saveModel: {
        show: false,
        title: '',
        loading: true
      },
      delModel: {
        show: false,
        id: 0
      },
      previewModel: {
        img: '',
        visible: false
      },
      gameList: []
    }
  },
  watch: {
    'adForm.gameId': function (val, oldVal) {
      if (val <= 0) {
        this.typeList = [{
          id: 1,
          name: '主页轮播图'
        }, {
          id: 2,
          name: '主页滚动广告'
        }]
      } else {
        this.typeList = [{
          id: 3,
          name: '具体游戏轮播图'
        }]
      }
    }
  },
  mounted() {
    this.getGameList()
    this.getAdList()
  },
  methods: {
    getGameList() {
      Core.Api.Game.list({})
        .then(res => {
          let list = [{
            id: 0,
            name: '全部'
          }];
          res.list.forEach(v => {
            list.push({
              id: v.id,
              name: v.name
            })
          })
          this.gameList = list
        })
    },
    getAdList() {
      this.loading = true
      Core.Api.Ad.list({page: this.currentPage})
        .then(res => {
          this.loading = false
          this.list = res.list
          this.total = res.count
        })
    },
    pageChange(page) {
      this.currentPage = page
      this.getAdList()
    },
    onClickSaveAdBtn(item) {
      this.saveModel.title = item.id ? '编辑广告' : '添加广告'
      this.adForm = {
        id: item.id ? item.id : 0,
        title: item.id ? item.title : '',
        gameId: item.id ? item.game_id : 0,
        articleId: item.id ? item.article_id : '',
        url: item.id ? item.url : '',
        type: item.id ? item.type : ''
      }
      this.img = item.id ? item.img : ''
      this.saveModel.show = true
    },
    onClickDeleteAdBtn(item) {
      this.delModel.id = item.id
      this.delModel.show = true
    },
    cancelModal() {
      this.$refs.adForm.resetFields()
    },
    handleUploadSuccess(res) {
      this.img = [res.data]
    },
    handleView(name) {
      this.previewModel.img = name;
      this.previewModel.visible = true;
    },
    handleRemove(index) {
      this.img = []
    },
    saveAd(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let id = this.adForm.id
          if (!this.adForm.type) {
            this.$Message.warning("请选择位置")
            return
          }
          let data = {
            id: this.adForm.id,
            title: this.adForm.title,
            img: this.img,
            url: this.adForm.url,
            articleId: this.adForm.articleId ? this.adForm.articleId : 0,
            gameId: this.adForm.gameId,
            type: this.adForm.type
          }

          Core.Api.Ad.save(data).then(() => {
            this.$Message.success(id ? '修改成功！' : '添加成功！')
            this.getAdList()
            this.saveModel.show = false
            this.$refs.adForm.resetFields()
          }).catch(err => {
            this.saveModel.loading = false
            setTimeout(() => {
              this.saveModel.loading = true
            })
          })
        } else {
          this.saveModel.loading = false
          setTimeout(() => {
            this.saveModel.loading = true
          })
        }
      })
    },
    delAd() {
      let data = {
        id: this.delModel.id
      }
      Core.Api.Ad.delete(data)
        .then(() => {
          this.$Message.success('删除成功！')
          this.currentPage = 1
          this.getAdList()
        }).catch(err => {
        this.$Message.error(err.msg)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.game-view {
  .icon {
    height: 140px;
    padding: 10px 16px 10px 0;
  }
}

.demo-upload-list {
  display: inline-block;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
